<template>
  <div >
    <div>
      <el-form label-width="120px" :model="formData"  ref="editForm" >
        <el-form-item label="景点名称" prop="title">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.title" placeholder="请输入景点的名称" style="width: 50%;"  :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="营业时间" prop="businessHours">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.businessHours" auto-complete="off" placeholder="请输入营业时间" style="width: 50%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="联系人" prop="contacts">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.contacts" auto-complete="off" placeholder="请输入景点的联系人" style="width: 50%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.telephone" auto-complete="off" placeholder="请输入联系电话" style="width: 50%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="图片" prop="headImage">
          <div class="ok-box-left">
            <img v-if="formData.headImage" :src="ok.tool.getImg(formData.headImage)" class="avatar">
          </div>
        </el-form-item>
        <el-form-item label="经度" prop="longitude">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.longitude" auto-complete="off" style="width: 50%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="纬度" prop="latitude">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.latitude" auto-complete="off" style="width: 50%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <div class="ok-box-left">
            <el-input size="small" v-model="formData.address" auto-complete="off" style="width: 80%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="描述" prop="describeInfo">
          <div class="ok-box-left">
            <el-input type="textarea" size="small" v-model="formData.describeInfo" auto-complete="off" style="width: 80%;" :disabled="true"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="位置" prop="describeInfo">
          <div class="ok-box-left">
            <div id="wrapper" style="width: 90%;height: 300px"></div>
          </div>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import ok from "@/assets/ok";

export default {
  name:"AttractionsView",
  computed: {
    ok() {
      return ok
    }
  },
  props:{
    data:{
      default: null,
    }
  },
  mounted() {
    this.init_data();
    this.init();
  },
  data(){
    return{
      formData:{
        id:"",
        title:"",
        describeInfo:"",
        address:"",
        longitude:"",
        latitude:"",
        businessHours:"",
        contacts:"",
        telephone:"",
        type_name:"",
        headImage:"",
      },
    }
  },
  methods:{
    init_data(){
      if (this.data){
        this.formData = this.data;
      }
    },
    init() {
      let _this = this;
      AMapLoader.load({
        "key": "d244f562a0204c16c559cc1a6b728676",
        "version": "2.0",
        "plugins": ['AMap.AutoComplete', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.CitySearch', 'AMap.Geocoder'],
      }).then((AMap) => {
        let map = new AMap.Map('wrapper', {
          zoom: 13,
          resizeEnable: true
        });
        let lon = this.formData.longitude;
        let lat = this.formData.latitude;

        if (!this.formData.longitude) {
          lon = 114.91096374603269;
          lat = 34.723935015203985;
        }

        let position;
        if (lon != null && lat != null) {
          position = [lon, lat];
          _this.marker = new AMap.Marker({
            position: position,
            offset: new AMap.Pixel(-13, -30),
            draggable: true,
            cursor: 'move',
            raiseOnDrag: true
          });
          map.setCenter(position);
          map.add(_this.marker);
        } else {
          let address;
          if (!this.formData.address) {
            address = this.formData.address;
          } else {
            address = '民权县双塔镇';
          }
          let placeSearch = new AMap.PlaceSearch({city: '全国'});
          placeSearch.search(address, function (status, result) {
            console.log(result.poiList.pois[0].location)
            position = result.poiList.pois[0].location;
            _this.marker = new AMap.Marker({
              position: position,
              offset: new AMap.Pixel(-13, -30),
              draggable: true,
              cursor: 'move',
              raiseOnDrag: true
            });
            map.setCenter(position);
            map.add(_this.marker);
          })
        }
        const mouseup = function (e) {
          _this.formData.longitude = e.lnglat.getLng();
          _this.formData.latitude = e.lnglat.getLat();
          console.info(e.lnglat);
        };
        const moveend = function () {
          _this.formData.longitude = map.getCenter().lng;
          _this.formData.latitude = map.getCenter().lat;
          console.info(map.getCenter());
          _this.marker = new AMap.Marker({
            position: map.getCenter(),
            offset: new AMap.Pixel(-13, -30),
            draggable: true,
            cursor: 'move',
            raiseOnDrag: true
          });
          map.setCenter(map.getCenter());
          map.add(_this.marker);
        };
        // const movestart = function () {
        //   map.remove(_this.marker);
        // };
        // map.on('mouseup', mouseup);
        // map.on('movestart', movestart);
        // map.on('moveend', moveend);
      }).catch(e => {
        console.log(e);
      });
    },
  }

}
</script>
